<template>
  <div class="app-container">
    <!-- 查询条件框 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="form.id" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="exportOrders">导出</el-button>
        </el-form-item>
      </el-form>
      <el-divider />
      <!-- 信息列表 -->
      <el-table ref="orderTable" :data="orders" style="width: 100%" stripe class="table" @selection-change="handleSelectionChange">
        <el-table-column v-model="orderIds" type="selection" width="55" />
        <el-table-column prop="id" label="编号" width="200" />
        <el-table-column prop="username" label="用户名" width="100" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="count" label="人数" width="100" />
        <el-table-column prop="price" label="价格" width="100" />
        <el-table-column prop="totalPrice" label="总金额" width="100" />
        <el-table-column prop="createTime" label="创建时间" sortable>
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.status===2" type="danger">已取消</el-tag>
            <el-tag v-show="scope.row.status===0" type="warning">未支付</el-tag>
            <el-tag v-show="scope.row.status===1" type="success">已支付</el-tag>
            <!-- {{ status[scope.row.status].name }} -->
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="景区名称">
                <span>{{ props.row.attrName }}</span>
              </el-form-item>
              <el-form-item label="类型">
                <span v-show=" props.row.type=0">成人</span>
                <span v-show=" props.row.type=1">儿童</span>
              </el-form-item>
              <el-form-item label="预定时间">
                <span v-show="props.row.orderTime">{{ parseTime(props.row.orderTime) }}</span>
              </el-form-item>
              <el-form-item label="支付时间">
                <span v-show="props.row.payTime">{{ parseTime(props.row.payTime) }}</span>
              </el-form-item>
              <el-form-item label="出行人备注">
                <span>{{ props.row.orderDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-more-outline" circle />
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination :page-size="form.pageSize" :pager-count="11" layout="prev, pager, next" :total="total" class="bottom" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { getOrderList } from '@/api/order'
import { parseTime } from '@/utils/blogUtil'
import axios from 'axios'
import { mapGetters } from 'vuex'

export default {
  name: 'Order',
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 8,
        status: 3
      },
      orders: [],
      total: 0,
      id: '',
      status: [
        { id: 0, name: '未支付' },
        { id: 1, name: '已支付' },
        { id: 2, name: '已取消' },
        { id: 3, name: '全部' }
      ],
      parseTime,
      orderIds: { ids: [] }
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  created() {
    this.getOrders()
  },
  methods: {
    async getOrders() {
      const res = await getOrderList(this.form)
      if (res.code === 200) {
        const { orders, total } = res.data
        this.orders = orders
        this.total = total
        console.log(this.orders)
      } else {
        console.log('查询失败')
      }
    },
    handleSelectionChange(val) {
      // this.orderIds = this.$refs.orderTable
      this.$refs.orderTable = val
      console.log(val)
      this.$refs.orderTable.forEach(element => {
        this.orderIds.ids.push(element.id)
      })
      console.log(this.orderIds)
    },
    exportOrders() {
      // console.log(this.orderIds)
      // // exportFile(this.orderIds)
      // exportFile().then(res => {
      //   console.log(res)
      //   const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      //   const url = window.URL.createObjectURL(blob)
      //   const link = document.createElement('a') // 创建a标签
      //   link.href = url
      //   link.download = '通用信息.xlsx' // 重命名文件
      //   link.click()
      //   URL.revokeObjectURL(url)
      // })
      axios({
        method: 'get',
        headers: {
          token: this.token
        },
        responseType: 'blob',
        url: process.env.VUE_APP_BASE_API + '/order/export'
      }).then(res => {
        console.log(res.data)
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = '订单列表.xlsx'
        a.href = url
        a.click()
        url.revokeObjectURL(url)
      })
    },
    search() {
      this.getOrders()
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;

  .box-card {
    width: 100%;
    height: 100%;

    .demo-form-inline {
      margin-left: 20px;
    }

    .table {
      width: 100%;
      height: 470px;
    }
    .demo-table-expand {
      font-size: 0;
      margin-left: 60px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

    .bottom {
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }

  }
}
</style>
